<script setup>
  import {ref, onMounted} from 'vue'
  import {ElConfigProvider} from 'element-plus';
  import {useLocaleStore} from './store/locales.js';
  import {useRouter, useRoute} from 'vue-router'
  const appStore = useLocaleStore();
  const router = useRouter()
  const route = useRoute()

  import {apiGetIndexInfo} from '@/api/index.js'

  onMounted(() => {
    apiGetIndexInfo({}).then((res) => {
      appStore.setMenuList(res.menuList)
      appStore.setSystemDto(res.systemDto)
    })

    // document.documentElement 是全局变量时
    const el = document.documentElement
    getComputedStyle(el).getPropertyValue(`--el-color-primary`)
    el.style.setProperty('--el-color-primary', '#1027EF')


    // if (route.query.language == 1 || route.query.language == 2) {
    //   let key = route.query.language == 2 ? 'en' : 'zh'
    //   appStore.setLocale(key)
    //   let lsLocale = {
    //     curLocale: key
    //   }
    //   localStorage.setItem('locale', JSON.stringify(lsLocale))
    //
    //   setTimeout(() => {
    //     location.reload()
    //   }, 500)
    // }


  })
</script>

<template>
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <router-view/>
  </el-config-provider>
</template>

<style lang="scss">
  :root {
    --el-color-primary: green;
  }
  .el-loading-mask{
    background-color: unset!important;
  }


  * {
    padding: 0;
    margin: 0; font-family: 'Microsoft YaHei', 'San Francisco', sans-serif;;
  }

  @media screen and (max-width: 1079px) {
    .pageContainer {
      width: 100%;
      padding: 0 10px;
    }

    .boxTitle {
      width: 100%;
      .title {
        height: 40px;
        h1 {
          display: none;
        }
        h2 {
          font-size: 16px;
          line-height: 40px;
          color: #1A1A25;
        }
      }
    }

    .pageBanner {
      width: 100%;
      height: 35.4vw;
      .text {

        color: #fff;
        padding: 10vw;
        h1 {
          font-size: 18px;  font-weight: bold;
        }
        .line {
          width: 40px;
          margin-top: 5px;
          border-bottom: 2px solid #fff;
        }
        .name {
          font-size: 14px;
          padding-top: 5px;
        }
      }
    }
  }

  @media screen and (min-width: 1080px) {

    .pageContainer {
      width: 75vw;
      margin: 0 auto;
    }

    .boxTitle {
      display: flex;
      width: 100%;
      justify-content: space-between;
      .title {
        height: 6vw;
        position: relative;
        width: 80%;
        h1 {
          position: absolute;
          left: 0;
          top: 0;
          font-size: 3vw;
          color: #f6f6f6;
          font-weight: normal;
          z-index: 1;
          line-height: 4vw;
        }
        h2 {
          font-size: 1.8vw;
          line-height: 6vw;
          color: #1A1A25; z-index: 2; position: relative;
        }
      }
    }

    .pageBanner {
      width: 100%;
      height: 35.4vw;
      .text {
        padding-top: 15vw;
        color: #fff;
        h1 {
          font-size: 3vw;
          font-weight: bold;
        }
        .line {
          width: 5.5vw;
          border-bottom: 0.2vw solid #fff;
        }
        .name {
          font-size: 1.56vw;
          padding-top: 1vw;
        }
      }
    }
  }



</style>
